"use client"

import React, { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { skills } from "@/data/personalData"
import { Code, Database, Wrench, Star, TrendingUp } from "lucide-react"

export const Skills = () => {
  const [selectedCategory, setSelectedCategory] = useState("全部")

  const categories = ["全部", "前端开发", "后端开发", "工具与技术"]

  const filteredSkills = selectedCategory === "全部"
    ? skills
    : skills.filter(skill => skill.category === selectedCategory)

  const getSkillIcon = (category: string) => {
    switch (category) {
      case "前端开发":
        return <Code className="h-5 w-5" />
      case "后端开发":
        return <Database className="h-5 w-5" />
      case "工具与技术":
        return <Wrench className="h-5 w-5" />
      default:
        return <Star className="h-5 w-5" />
    }
  }

  const getLevelColor = (level: number) => {
    if (level >= 85) return "bg-green-500"
    if (level >= 70) return "bg-blue-500"
    return "bg-yellow-500"
  }

  const getLevelText = (level: number) => {
    if (level >= 85) return "精通"
    if (level >= 70) return "熟练"
    return "掌握"
  }

  return (
    <section id="skills" className="py-20 bg-secondary/20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
            技能专长
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            我的技术栈和专业技能，涵盖前端、后端和开发工具
          </p>
        </div>

        {/* Category Filter */}
        <div className="flex flex-wrap justify-center gap-3 mb-12">
          {categories.map((category) => (
            <Button
              key={category}
              variant={selectedCategory === category ? "default" : "outline"}
              onClick={() => setSelectedCategory(category)}
              className="px-6"
            >
              {category}
            </Button>
          ))}
        </div>

        {/* Skills Grid */}
        <div className="grid lg:grid-cols-3 gap-8 mb-12">
          {filteredSkills.map((category) => (
            <Card key={category.category} className="h-full">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  {getSkillIcon(category.category)}
                  {category.category}
                </CardTitle>
                <CardDescription>
                  {category.items.length} 项技能
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {category.items.map((skill) => (
                  <div key={skill.name} className="space-y-2">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{skill.name}</span>
                        <span className={`px-2 py-1 rounded-full text-xs ${
                          skill.level >= 85
                            ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
                            : skill.level >= 70
                            ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
                            : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
                        }`}>
                          {getLevelText(skill.level)}
                        </span>
                      </div>
                      <span className="text-sm text-muted-foreground">
                        {skill.level}%
                      </span>
                    </div>
                    <div className="w-full bg-secondary rounded-full h-2">
                      <div
                        className={`h-2 rounded-full transition-all duration-500 ease-out ${getLevelColor(skill.level)}`}
                        style={{ width: `${skill.level}%` }}
                      ></div>
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Skill Highlights */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
          <Card className="text-center p-6">
            <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
              <TrendingUp className="h-6 w-6 text-primary" />
            </div>
            <h3 className="font-semibold mb-2">持续学习</h3>
            <p className="text-sm text-muted-foreground">
              每月学习新技术，保持技术栈更新
            </p>
          </Card>

          <Card className="text-center p-6">
            <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
              <Code className="h-6 w-6 text-primary" />
            </div>
            <h3 className="font-semibold mb-2">代码质量</h3>
            <p className="text-sm text-muted-foreground">
              注重代码规范和最佳实践
            </p>
          </Card>

          <Card className="text-center p-6">
            <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
              <Database className="h-6 w-6 text-primary" />
            </div>
            <h3 className="font-semibold mb-2">架构设计</h3>
            <p className="text-sm text-muted-foreground">
              具备系统架构设计能力
            </p>
          </Card>

          <Card className="text-center p-6">
            <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
              <Wrench className="h-6 w-6 text-primary" />
            </div>
            <h3 className="font-semibold mb-2">DevOps</h3>
            <p className="text-sm text-muted-foreground">
              熟悉CI/CD和自动化部署
            </p>
          </Card>
        </div>

        {/* Certifications */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Star className="h-5 w-5 text-primary" />
              专业认证
            </CardTitle>
            <CardDescription>
              获得的专业技术认证
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid md:grid-cols-3 gap-4">
              <div className="p-4 border rounded-lg bg-background">
                <h4 className="font-semibold mb-1">AWS认证解决方案架构师</h4>
                <p className="text-sm text-muted-foreground">2023年获得</p>
              </div>
              <div className="p-4 border rounded-lg bg-background">
                <h4 className="font-semibold mb-1">Google移动网站认证</h4>
                <p className="text-sm text-muted-foreground">2022年获得</p>
              </div>
              <div className="p-4 border rounded-lg bg-background">
                <h4 className="font-semibold mb-1">React认证开发者</h4>
                <p className="text-sm text-muted-foreground">2021年获得</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}